<template>
  <u-popup :show="visible" :round="25">
    <view class="shopListDialog">
      <view class="container-top">
        <view class="_h2">使用门店</view>
        <view class="close" @click="closePop">
          <u-icon name="close-circle" size="20"></u-icon>
        </view>
      </view>
      <view class="list-item-container">
        <view class="list-item" v-for="(dItem, index) in list" :key="index">
          <view class="item-lf">
            <view class="_h2">{{ dItem.shopName }}</view>
            <view v-if="dItem.distance" class="_h3">
              {{ $myTool.transitionDistance(dItem.distance) }}
            </view>
            <view class="_h4" v-if="dItem.address">{{
              dItem.provinceCode +
              dItem.cityCode +
              dItem.areaCode +
              dItem.address
            }}</view>
          </view>
          <view
            @click="
              $myTool.lookLocation(
                dItem.latitude,
                dItem.longitude,
                dItem.shopName,
                `${dItem.provinceCode}${dItem.cityCode}${dItem.areaCode}${dItem.address}`
              )
            "
            class="iconfont icon-dingwei2"
            :style="{ fontSize: '30px', color: themeColor }"
          ></view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { getCouponUseShop } from "@/service/api/sp-coupon";
import { mapState } from "vuex";

export default {
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
    couponCode: {
      require: true,
    },
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  data() {
    return {
      allShopCanUse: 0,
      listData: [],
      list: [],
      queryParams: {
        latitude: "",
        longitude: "",
      },
    };
  },
  watch: {
    couponCode: {
      handler() {
        this.fetData();
      },
    },
  },
  methods: {
    closePop() {
      this.$emit("update:visible", false);
    },
    async fetData() {
      let { queryParams, couponCode } = this;
      if (!couponCode) return;
      await this.$getUserLocation().then((res) => {
        let result = res?.currentLocation
          ? res?.currentLocation
          : res?.location;
        let { longitude, latitude } = result;
        queryParams = Object.assign({}, queryParams, {
          longitude,
          latitude,
          couponId: couponCode,
        });
      });
      await getCouponUseShop(queryParams).then((res) => {
        this.list = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.shopListDialog {
  width: 100%;
  height: 66vh;
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .container-top {
    position: relative;
    margin: 0 46rpx;
    margin-top: 56rpx;
    padding: 0 39rpx;
    padding-bottom: 43rpx;
    border-bottom: 1rpx solid #e0e0e0;
    text-align: center;
    .close {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .list-item-container {
    flex: 1;
    overflow-y: scroll;
    ::-webkit-scrollbar {
      display: none;
    }
    padding-bottom: 50rpx;
    .list-item {
      margin: 0 46rpx;
      padding: 34rpx 0;
      min-height: 160rpx;
      border-bottom: 1rpx solid #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item-lf {
        margin-right: 35rpx;
      }
    }
  }
}
._h2 {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 700;
  color: #090909;
}
._h4 {
  margin-top: 25rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #888;
}
._h3 {
  margin-top: 25rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #888;
}
</style>
